<script setup lang="ts">
import useDragAndDrop from "@@/composables/useDragAndDrop"
import { ref } from "vue"
import { Position, Node, useVueFlow } from "@vue-flow/core"

interface Props {
  id: string | undefined
}

const props = defineProps<Props>()

export interface NodeProps {
  name: string
  value: string
}

const { screenToFlowCoordinate, removeNodes } = useVueFlow()
const { onDragStart, onDrop } = useDragAndDrop()

const defNodes = ref<NodeProps[]>([
  { name: "机动能力", value: "2001" },
  { name: "弹药消耗", value: "2002" },
  { name: "探测能力", value: "2003" },
  { name: "打击能力", value: "2004" },
  { name: "毁伤能力", value: "2005" },
  { name: "生存能力", value: "2006" }
])
const output = ref<NodeProps[]>([{ name: "导出结果", value: "9999" }])
const nodeText = ref<{ [PropName: string]: number }>()
const gragStart = async (event: DragEvent, item: NodeProps, dragType?: string) => {
  const label: string = await getLabel(item)
  const position = screenToFlowCoordinate({
    x: event.clientX,
    y: event.clientY
  })
  const newNode: Node = {
    id: item.value,
    type: dragType === "output" ? "output" : "default",
    class: "light",
    position,
    data: { label: label, item },
    targetPosition: Position.Left,
    sourcePosition: Position.Right,
    connectable: true
  }
  onDragStart(event, dragType, newNode)
}

const getLabel = (item: NodeProps): Promise<string> => {
  return new Promise((resolve) => {
    resolve(`${item.name}`)
  })
}

const handleDeleteNodes = () => {
  removeNodes(props.id)
}
</script>

<template>
  <div class="drag-tip-pane">
    <el-popover placement="top" :width="290" trigger="click" popper-class="drag-tip-pane-popper">
      <template #reference>
        <el-button class="tip-show-btn">添加节点</el-button>
      </template>
      <div class="node-content">
        <div class="node-pane">
          <p>数据采集</p>
          <div class="nodes">
            <div
              class="vue-flow__select-node-output"
              v-for="item in defNodes"
              :key="item.value"
              :draggable="true"
              @dragstart="gragStart($event, item)"
              @drop="onDrop($event)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="node-pane">
          <p>导出结果</p>
          <div class="nodes">
            <div
              class="vue-flow__select-node-output"
              v-for="item in output"
              :key="item.value"
              :draggable="true"
              @dragstart="gragStart($event, item, 'output')"
              @drop="onDrop($event)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </el-popover>
    <el-button type="danger" :disabled="props.id == undefined" @click="handleDeleteNodes">删除节点</el-button>
  </div>
</template>
<style lang="scss" scoped>
@import "@@/assets/styles/mixins.scss";

.drag-tip-pane {
  position: absolute;
  z-index: 99;
  bottom: 20px;
  left: 20px;
}

.node-pane {
  display: flex;
  flex-direction: column;
}

.nodes > * {
  margin-bottom: 10px;
  cursor: grab;
}

.node-content {
  max-height: calc(40vh);
  overflow-y: auto;

  @extend %scrollbar;
}

.nodes {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: wrap;
  z-index: 99;
}

.vue-flow__select-node-output {
  font-size: 14px;
  color: white;
  width: 100px;
  height: 40px;
  line-height: 40px;
  background: #1d2a4d;
  border-radius: 0px 0px 0px 0px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
